#include("common.html")
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>商城</title>
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <link rel="stylesheet" type="text/css" href="#(tpath)/static/css/vant.css">
    <link rel="stylesheet" type="text/css" href="#(tpath)/static/css/filter.css">
    <script type="text/javascript" src="#(tpath)/static/js/jquery.js"></script>
    <script type="text/javascript" src="#(tpath)/static/js/common.js"></script>
  </head>
  
  <body class="">
    <style type="text/css">@media only screen and (min-width: 320px){ html { font-size: 62.5% !important; } } @media only screen and (min-width: 640px){ html { font-size: 125% !important; } } @media only screen and (min-width: 750px){ html { font-size: 150% !important; } } @media only screen and (min-width: 1242px){ html { font-size: 187.5% !important; } }</style>
    <style>.van-search { display: -webkit-box; display: -webkit-flex; display: flex; padding: 7px 15px; -webkit-box-align: center; -webkit-align-items: center; align-items: center; box-sizing: border-box; position: fixed; z-index: 999; height: 44px; width: 100%; } .historyS{ margin-top: 30px; padding: 15px; min-height:100vh; background:#ffffff; } .historyS .ptitle{ color: #333; font-weight: bold; font-size: 14px; } .historyS .histag{ color: #333; font-size: 14px; padding: .4em .8em; line-height: normal; border-radius: .5em; margin: 0 10px 10px 0px; display: inline-block; background: #f5f5f5; } .his_delete{float: right; font-size: 18px; color: #666;} .search-icon .list-icon img{width:1.5rem;height:1.5rem;margin-top:0.6rem;} .search-icon .van-icon-arrow::before{font-size:0.2rem;} .search-icon .van-icon{vertical-align:middle;margin-left:0.5rem;} .search-icon .defarrow-up{width:0; height:0; border-width:0 0.4rem 0.4rem; border-style:solid; border-color:transparent transparent #333; position:absolute; top:1.3rem; right:1rem; } .search-icon .defarrow-down{width:0; height:0; border-width:0.4rem 0.4rem 0; border-style:solid; border-color:#333 transparent transparent;/*灰 透明 透明 */ position:absolute; top:1.8rem; right:1rem; } .search-icon .active .defarrow-up{width:0; height:0; border-width:0 0.4rem 0.4rem; border-style:solid; border-color:transparent transparent #f44; position:absolute; top:1.3rem; right:1rem; } .search-icon .active .defarrow-down{width:0; height:0; border-width:0.4rem 0.4rem 0; border-style:solid; border-color:#f44 transparent transparent;/*灰 透明 透明 */ position:absolute; top:1.8rem; right:1rem; } .search-icon .active{color:#f44;} .search-icon .active .opacity{opacity:0.5;} .search-icon .van-col--6{position:relative;} .hotgoodlist .van-col--12 {padding:5px;} .hotgoodlist .van-col--12 .zan-c-black {padding: 10px 15px;position: relative;background: #fff} .hotgoodlist .zan-panel-list img { width:8rem;height:8rem;margin-bottom: 10px;} .hotgoodlist .van-col--12 .zan-c-black .goods_title { font-size: 14px; text-overflow:ellipsis;white-space:nowrap;overflow:hidden;} .hotgoodlist .van-col--12 .zan-c-black .goods_other {line-height: 20px; line-height: 32px; height: 20px;} .hotgoodlist .van-col--12 .zan-c-black .goods_other .price {color: #f44; float: left;} .hotgoodlist .van-col--12 .zan-c-black .goods_other .price-rmb {color: #999; font-size: 10px; float: right;} .hotgoodlist .van-col--12 .zan-c-black .goods_other .van-button {position:absolute;right:7px;bottom:35px;font-size:12px; padding: 2px 0;border:none;} .search-btn .van-icon-cart::before { /*content: "\F00E";*/ color: #fff; background: #f44; border-radius: 2rem; padding: 0.5rem; } .text-center{text-align:center;} .goodlistitem2{margin-top: 66px;margin-bottom: 80px;} .goodlistitem2 .sale-num{color:#7d7e80;margin-top: 10px;} .card-img{ width: 100%; height: 100%; } .card-img img{ height: 100%; } .searchBox .search-icon{height: 35px; line-height: 35px; position: fixed; top: 42px; left: 0; z-index: 99; width: 100%; background: #ffffff; } /*.van-search__action{color:#fff}*/ .null-data{ width: 100%; text-align: center; margin: 12rem auto; color: #d9d9d9; } .wechat-customer .wechat-bg{background:#333;opacity:0.5;width:100%;z-index:999;position:fixed;top:0;bottom:0;} .wechat-customer .wechat-cont{width:12rem;background:#fff;border-radius:5px;position:fixed;top:50%;left:50%;margin-left:-8rem;z-index:999;text-align:center;padding:2rem;margin-top:-10rem;} .wechat-customer .wechat-cont img{width:10rem;height:10rem;} .wechat-customer .wechat-cont .closewindow{position:absolute;right:1rem;top:1rem;} .wechat-customer .wechat-cont .button1{width: 12rem; height: 2rem; line-height: 2rem; border: 0px; margin: 0rem auto 0 auto; color: #999; font-size: 12px;} .wechat-customer .wechat-cont .button2{width:12.1rem;height:2rem;background:#2ba246;color:#fff;border:1px solid #2ba246;margin-top:0.5rem;} .no-data{ width: 100%; height:100%; padding-top: 200px; text-align: center; font-size: 12px; color: #d9d9d9; } .container-one { min-height: 0; height: 100%; overflow: hidden; box-sizing: border-box; font-size: 14px; color: #666; } .container-two{ background: #f2f2f2; min-height: 100vh; overflow: hidden; box-sizing: border-box; font-size: 14px; color: #666; } .lbox-content{ width: 100%; margin-top: 44px; } .lbox-content-left{ width: 25%; background-color: #f8f8f8; overflow-y: scroll; float: left; } .lbox-content-right{ width: 75%; background-color: #fff; overflow-y: scroll; float: left; } .content-left-item-active{ border-left:2px solid #333; background:#fff; font-weight:bold; color:#ee0a25; padding:0 5px; line-height:44px; text-align:center; box-sizing:border-box; font-size:12px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; } .content-left-item{ padding:0 5px; line-height:44px; text-align:center; box-sizing:border-box; font-size:12px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; } .branditem{ padding: 20px; box-sizing: border-box; } .lbox-content-right .branditem .van-col{ text-align: center; margin-bottom: 20px; padding: 0px 5px; box-sizing: border-box; } .lbox-content-right .bimg{ height: 35px; line-height: 50px; text-align: center; width: 100%; border: 1px solid #eee; padding: 3px 0px; } .lbox-content-right .bimg img{width:70%;height: 25px;} .cateitem{ padding: 20px; box-sizing: border-box; } .lbox-content-right .cateitem .btitle{ font-size:12px; color:#666; max-height:65px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; background:#f8f8f8; padding:10px 5px; border-radius:5px; margin:5px; text-align:center; } .btitle_img img{ width: 40px; height: 40px; } .cate-content{ width: 96%; margin:0px 2%; box-sizing: border-box; } .cate-item{ width: 100%; border-bottom: 1px solid #e1e1e1; padding: 10px; box-sizing: border-box; display: flex; background-color: #fff; position: relative; } .cate-item-img{ width: 60px; height: 60px; margin-top: 8px; margin-bottom: 8px; } .cate-item-right{ flex: 1; margin-left: 10px; } .cate-item-title{ font-size: 12px; color: #343434; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height:32px; } .cate-item-count{ font-size: 10px; margin-top: 5px; color: #adadad; } .cate-item-price{ width: 100%; display: flex; color: #f44; } .item-price-min{ font-size: 14px; color: #f44; font-weight: 600; } .item-price-rmb{ font-size: 10px; color: #adadad; margin-left: 5px; line-height:20px; } .hotgoods-item-img{ width: 100%; text-align: center; } .card_content{ color: #323233; display: -webkit-box; display: -webkit-flex; display: flex; font-size: 12px; position: relative; box-sizing: border-box; padding: 5px 15px; background-color: #fafafa; -webkit-flex-wrap: wrap; flex-wrap: wrap; } .card_thumb{ position: relative; width: 90px; height: 90px; margin-right: 10px; -webkit-box-flex: 0; -webkit-flex: none; flex: none; } .card_thumb img { border: 0; max-width: 100%; max-height: 100%; }
      .card_content_right{ position: relative; height: 90px; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; } .card_content_title{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .card_price { display: inline-block; color: #f44; font-weight: 700; font-size: 12px; } .card_origin-price{ display: inline-block; margin-left: 5px; font-size: 10px; color: #7d7e80; text-decoration: line-through; } .red{ font-size: 12px; } /*.van-tag{ height: 16px; }*/ .goods-content{ padding: 5px 10px 0px; box-sizing: border-box; } .goods-card{ margin-bottom: 10px; padding: 10px; box-sizing: border-box; background-color: #fff; display: flex; border-radius: 5px; position: relative; } .goods-stock2{ position: absolute; width: 100px; height: 100px; opacity:0.5; background-color: #000; left: 10px; top: 10px; text-align: center; color: #fff; line-height: 100px; font-size: 16px; font-weight: 600; } .card-img{ width: 100px; height: 100px; } .card-content{ flex: 1; width: 100%; margin-left: 10px; border-radius: 5px; height: 100px; position: relative; } .card-title{ font-size: 14px; color: #000; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .card-price{ color: #eb544d; font-size: 12px; position: absolute; bottom: 0px; left: 0px; } .price{ font-size: 18px; font-weight: 550; } .goods-content2{ box-sizing:border-box; padding:0px 10px 10px; } .goods-item-content{ position:relative; float:left; padding:5px; width:50%; box-sizing:border-box; border-radius:5px; } .goods-item-img{ width: 100%; height: 160px; } .goods-item-title{ color: #333; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; margin:0px 10px 0px; font-size: 14px; box-sizing: border-box; height: 42px; line-height: 20px; } .goods-item-buy{ color: #d5d5d5; font-size: 14px; padding: 0px 10px; box-sizing: border-box; } .goods-item-price-content{ padding: 0px 10px 5px; font-size: 14px; display: flex; } .currency{ font-size:12px; color:#eb544d; } .goods-item-price-min{ float: left; color: #eb544d; font-weight: 700; font-size: 14px; line-height:28px; flex: 1.5; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .goods-stock{ position: absolute; width: 60px; height: 60px; opacity:0.5; background-color: #000; left: 10px; top: 18px; text-align: center; color: #fff; line-height: 60px; font-size: 16px; font-weight: 600; } .goods-stock-out{ width: 40px; height: 20px; transform: rotate(-30deg); border: 1px solid #eb544d; position: absolute; top: 36px; left:18px; text-align: center; color: #eb544d; font-weight: 600; line-height: 20px; font-size: 12px; } .goods-stock3{ position: absolute; width: 100%; height: 160px; opacity:0.5; background-color: #000; left: 0px; top: 0px; text-align: center; color: #fff; line-height: 160px; font-size: 16px; font-weight: 600; } .goods-seckill{ margin-right: 5px; } .search-content { width: 100%; box-sizing: border-box; padding: 1rem; } .search-tag { padding: .4rem .5rem; color: #fff; font-size: 10px; border-radius: .2em; float: left; width: 48%; float: left; text-align: center; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; margin-top:2rem; } .cl{clear:both;} .search-tag .van-icon-cross { float: right; margin-top: 2px; margin-left: 2px; } .fenlei-title{ text-align: left; margin-bottom:10px; font-size:14px; color:#999; } .fenlei-list{ flex:2; padding:16px; text-align: center; background:#fff; } .child-img{ width:80px; height:80px; padding: 16px; box-sizing: border-box; } .child-img img{ width:100%;height:100%; } .fenlei-list .van-row .van-col{ margin-bottom:16px; color:#333; font-size:12px; } .fenlei-list .van-sidebar-item--selected{ color:red; } .icon-img{ border-radius: 50%; width: 50px; height: 50px; background-color: #fff; border: none; box-shadow: 0px 0px 10px 2px #e5e5e5; margin: -11px auto 0; position:relative; z-index:9999; line-height: 50px; align-items: center; display: table-cell; vertical-align: middle; } .icon-img img{ max-width: 50px; border-radius: 50%; } .van-tabbar-item__icon img{ height: auto; } .van-tabbar{ height:55px; padding-bottom: 20px; }</style>
    <div id="cate" class="container-one">
        #include("footer.html")
       <form action="#(base)/product/search" method="get" id="searchkeywordForm">
        <div class="van-search" style="background: rgb(242, 242, 242);">
          <div class="van-cell van-cell--borderless van-field">
            <i class="van-icon van-icon-search van-cell__left-icon">
             
             </i>
            <!---->
            <div class="van-cell__value van-cell__value--alone">
              <div class="van-field__body">
                <input type="search" name="keyword" placeholder="请输入商品关键词" class="van-field__control">
                <!-- <button type="submit" value="Search" style="background: #ffffff;
    color: #ffffff;    outline: none;border: none;"><i class="van-icon van-icon-search van-cell__left-icon">
             </i></button> -->
                <!---->
                <!---->
                <!----></div>
              <!----></div>
            <!----></div>
            <div class="van-search__action" onclick="productSearch()">
            <div>搜索</div></div>
          <!----></div>
      </form>
      <div class="lbox">
        <div class="lbox-content">
          <div class="lbox-content-left" style="height: 350px !important;" id="productCategory">
          	#product_category_root_list()
          	#for(productCategory : productCategorys)
            <div #if(productCategoryId??) #if(productCategoryId==productCategory.id) class="content-left-item-active" #else class="content-left-item" #end #else #if(for.index==0) class="content-left-item-active" #else class="content-left-item" #end #end productCategoryId="#(productCategory.id)">#(productCategory.name)</div>
          	#end
          	#end
        </div>
        </div>
        <div class="lbox-content-right" style="height: calc(100% - 44px - 75px);">
          <div>
            <div class="cate-content">
              <div>
                <div class="van-list" id="productList">
                
                	<!-- start -->
                  <!-- <div class="cate-item">
                   
                   
                   
                    <img src="https://imgxsc.cdnchina360.com/gmh20190226/jpg_20200403/3e72a9bc54374b2a35ef8d2fedb767086157.jpg!width200" class="cate-item-img">
                    <div class="cate-item-right">
                      <div class="cate-item-title">【杭州保税仓】【羊一】Biostime合生元澳洲版金水滴金装羊奶粉1段 800g</div>
                      <div class="cate-item-count">193人付款</div>
                      <div class="cate-item-price">
                        <span class="red" style="color: rgb(42, 101, 170);">登录后查看价格</span></div>
                    </div>
                  </div> -->
                  <!-- end -->
                  
                  
                  
                  <!---->
                  <!----></div>
              </div>
            </div>
          </div>
        </div>
        <div style="clear: both;"></div>
      </div>
      <!----></div>
    <!-- 逻辑 -->
    <div class="van-toast van-toast--default van-toast--middle" style="z-index: 2005; display: none;">
      <!---->
      <!---->
      <div class="van-loading van-loading--circular van-loading--white" style="color: white;">
        <span class="van-loading__spinner van-loading__spinner--circular">
          <svg viewBox="25 25 50 50" class="van-loading__circular">
            <circle cx="50" cy="50" r="20" fill="none"></circle>
          </svg>
        </span>
      </div>
      <div class="van-toast__text">加载中...</div></div>
    <style>.van-tabbar{ height:55px; padding-bottom: 20px; } .suspend{ width: 100%; height: 100%; position: relative; z-index: 999; background-color: rgba(0,0,0,.6); position: fixed; top: 0; left: 0; } .suspend-content{ width: 244px; height: 55px; position: fixed; top: 70%; z-index: 900; } .suspend-content-left{ width: 44px; height: 40px; background-color: rgba(0,0,0,.6); color: #fff; font-size: 8px; padding: 3px; box-sizing: border-box; border-top-left-radius:5px; border-bottom-left-radius:5px; margin-top: 10px; float: left; } .suspend-icon{ float: left; width: 10px; height: 30px; padding: 5px 0px; margin-right: 3px; font-size: 14px; } .suspend-navigation{ float: left; width: 25px; height: 30px; box-sizing: border-box; font-size: 10px; } .suspend-navigation2{ float: left; width: 25px; height: 30px; padding: 10px 0px; box-sizing: border-box; font-size: 10px; } .suspend-content-right{ width: 200px; height: 60px; background-color: #fff; float: left; border-top-left-radius:5px; border-bottom-left-radius:5px; padding: 15px 10px; box-sizing: border-box; } .suspend-content-right .van-col{ text-align: center; } .suspend-contact{ font-size: 20px; } .suspend-contact-text{ font-size: 10px; transform: scale(0.7); } .wechat-customer .wechat-bg{background:#333;opacity:0.5;width:100%;z-index:999;position:fixed;top:0;bottom:0;} .wechat-customer .wechat-cont{width:12rem;background:#fff;border-radius:5px;position:fixed;top:50%;left:50%;margin-left:-8rem;z-index:999;text-align:center;padding:2rem;margin-top:-10rem;} .wechat-customer .wechat-cont img{width:10rem;height:10rem;} .wechat-customer .wechat-cont .closewindow{position:absolute;right:1rem;top:1rem;} .wechat-customer .wechat-cont .button1{width: 12rem; height: 2rem; line-height: 2rem; border: 0px; margin: 0rem auto 0 auto; color: #999; font-size: 12px;} .wechat-customer .wechat-cont .button2{width:12.1rem;height:2rem;background:#2ba246;color:#fff;border:1px solid #2ba246;margin-top:0.5rem;} .icon-img{ border-radius: 50%; width: 50px; height: 50px; background-color: #fff; border: none; box-shadow: 0px 0px 10px 2px #e5e5e5; margin: -11px auto 0; position:relative; z-index:9999; line-height: 50px; align-items: center; display: table-cell; vertical-align: middle; } .icon-img img{ max-width: 50px; border-radius: 50%; } .van-tabbar-item__icon img{ height: auto; }</style>
    <!-- 底部内容-->
    <div id="footer">
      <!---->
      <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 100;">
        <div class="van-tabbar-item">
          <div class="van-tabbar-item__icon">
            <i class="van-icon van-icon-shop">
              <!---->
              <!----></i>
            <!----></div>
          <div class="van-tabbar-item__text">首页</div></div>
        <div class="van-tabbar-item">
          <div class="van-tabbar-item__icon">
            <i class="van-icon van-icon-search">
              <!---->
              <!----></i>
            <!----></div>
          <div class="van-tabbar-item__text">分类搜索</div></div>
        <div class="van-tabbar-item">
          <div class="van-tabbar-item__icon">
            <i class="van-icon van-icon-cart">
              <!---->
              <!----></i>
            <div class="van-info"></div>
          </div>
          <div class="van-tabbar-item__text">购物车</div></div>
        <div class="van-tabbar-item">
          <div class="van-tabbar-item__icon">
            <i class="van-icon van-icon-contact">
              <!---->
              <!----></i>
            <!----></div>
          <div class="van-tabbar-item__text">我的</div></div>
      </div>
    </div>
  </body>

</html>
<script type="text/javascript" src="#(tpath)/static/js/load.js"></script>
<script type="text/javascript">
#if(productCategoryId??)
getProductListHtml(#(productCategoryId));
#else
var firstProductCategoryId = $("#productCategory div").eq(0).attr("productCategoryId");
getProductListHtml(firstProductCategoryId);
#end
$("#productCategory").on("click","div",function(){
	var curActive = $("#productCategory").find(".content-left-item-active");
	curActive.removeClass("content-left-item-active");
	curActive.addClass("content-left-item");
	$(this).addClass("content-left-item-active");
	var productCategoryId=$(this).attr("productCategoryId");
	getProductListHtml(productCategoryId);
});

$("#productCategoryItemList").on("click",".slide-box-item",function(){
	$.each($("#productCategoryItemList .slide-box-item"),function(index,item){
		$(item).css("background-color"," rgb(42, 101, 170)")
	});
	$(this).css("background-color"," rgb(89, 163, 249)")
	var productCategoryId=$(this).attr("productCategoryId");
});


var mainCatId;
var pageNumber = 1;
function getProductListHtml(productCategoryId){
	pageNumber = 1;
	mainCatId = productCategoryId;
	$.ajax({
        url: "#(base)/product/list?productCategoryId="+productCategoryId,
        type: "post",
        data: {"pageNumber":pageNumber},
        dataType: "text",
        success: function(res){
        	$(".lbox-content-right").animate({scrollTop: '0px'});
        	$("#productList").html(res);
        },
        error: function(res){
        }
    });
}


     //添加滚动事件
     $(".lbox-content-right").scroll(function(){
         scrollTop = $(this).scrollTop();
         totalHeight = $(this).height();
        console.log(scrollTop);
         if(scrollTop>(parseInt(pageNumber)*(97*13))){
        	 pageNumber++;
        	 $.ajax({
        	        url: "#(base)/product/list?productCategoryId="+mainCatId,
        	        type: "post",
        	        data: {"pageNumber":pageNumber},
        	        dataType: "text",
        	        success: function(res){
        	        	$("#productList").append(res);
        	        },
        	        error: function(res){
        	        }
        	    });
         }
     })
</script>